<template>
  <div class="user">
    <div class="top">
      <el-button type="primary" @click="linkAdd">+ 新增</el-button>
      <div class="search">
        <el-input placeholder="请输入用户名" v-model="search" class="input">
          <el-button slot="append" icon="el-icon-search" @click="userSearch"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 表单 -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%" :border="true">
        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
        <!-- <el-table-column prop="userId" label="ID" align="center" v-if="0"></el-table-column> -->
        <el-table-column prop="username" label="用户名" width="100" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="50" align="center"></el-table-column>
        <el-table-column prop="avatar" label="头像" width="300" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" alt width="50px" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page" v-if="pageStatus">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 编辑弹框 -->
      <el-dialog
        title="编辑用户"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        align="center"
      >
        <div class="form">
          <el-form
            :model="addObj"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="addObj.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="addObj.email"></el-input>
            </el-form-item>
            <el-form-item>
              <span>状态：</span>
              <el-radio v-model="addObj.status" :label="1">正常</el-radio>
              <el-radio v-model="addObj.status" :label="0">禁用</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除弹框 -->
      <el-dialog title="提示" :visible.sync="deleteVisible" width="30%" :before-close="handleClose">
        <span>确认要删除数据吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAllUser, userEdit, userDelete, userSearch } from "@/api";
export default {
  data() {
    return {
      search: "",
      currentPage: 1,
      pageSize: 5,
      total: 50,
      tableData: [],
      dialogVisible: false,
      deleteVisible: false,
      userId: "",
      pageStatus: true,
      addObj: {
        username: "",
        email: "",
        status: 1,
        userId: ""
      },
      radio: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "长度在 3 到 8 个字符",
            trigger: ["blur"]
          }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    handleEdit(index, row) {
      // console.log(index, row, 1234567890);
      this.addObj.userId = row.userId;
      this.addObj.username = row.username;
      this.addObj.email = row.email;
      this.addObj.status = row.status;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deleteVisible = true;
      this.userId = row.userId;
    },
    handleSizeChange(val) {
      // 修改pageSize
      this.pageSize = val;
      this.users();
    },
    handleCurrentChange(val) {
      // 修改currentPage
      this.currentPage = val;
      this.users();
    },
    handleClose(done) {
      done();
    },
    // 获取表单数据 渲染页面
    users() {
      getAllUser({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(data => {
        console.log(data, 12345678);
        if (data.code == 200) {
          // console.log(data.data.users);
          this.tableData = data.data.users;
          this.total = data.data.total;
        }
      });
    },
    linkAdd() {
      this.$router.push({ name: "adduser"});
    },
    sureEdit() {
      // console.log(this.addObj);
      this.$refs.ruleForm.validate(vaild => {
        if (vaild) {
          userEdit(this.addObj)
            .then(data => {
              // console.log(data);
              if (data.code == 200 && data.msg == "编辑成功") {
                this.dialogVisible = false;
                this.users();
              }
            })
            .catch(err => {
              this.$message({
                message: err,
                type: "error"
              });
            });
        }
      });
    },
    sureDelete() {
      userDelete({ userId: this.userId }).then(data => {
        // console.log(data);
        if (data.code == 200 && data.msg == "删除成功") {
          this.deleteVisible = false;
          this.users();
        }
      });
    },
    userSearch() {
      // console.log(this.search);
      if (this.search) {
        userSearch({ username: this.search }).then(data => {
          // console.log(data);
          if (data.code == 200 && data.msg == "搜索成功") {
            this.tableData = data.data;
            this.search = "";
            // this.total = data.data.length;
            this.pageStatus = false;
          }
        });
      } else {
        this.users();
        this.pageStatus = true;
      }
    }
  },
  created() {
    // console.log(this.currentPage, this.pageSize);
    this.users();
  }
};
</script>

<style lang="less" scoped>
.user {
  .top {
    width: 100%;
    height: 50px;
    margin-top: 40px;
    padding: 0 30px;
    box-sizing: border-box;
    .el-button {
      float: left;
    }
    .search {
      float: right;
      .input /deep/ .el-input__inner {
        border: 1px solid #ccc;
        outline: none;
      }
    }
  }
  .table {
    border: 1px solid #ccc;
  }
  .page {
    .el-pagination {
      width: 300px;
      margin-left: 300px;
      margin-top: 50px;
      margin-bottom: 50px;
    }
  }
}
</style>